<template>
  <a-modal
    v-if="form"
    :visible="visible"
    :title="title"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
      <a-form-item v-show="false" label="pid">
        <a-input
          v-decorator="[
            'pid',
            {
              rules: [{ required: true, message: '请输入pid!' }]
            }
          ]"
          disabled
        />
      </a-form-item>
      <a-form-item label="类型">
        <a-select
          v-decorator="[
            'type',
            {
              rules: [{ required: true, message: '请选择类型!' }]
            }
          ]"
          :disabled="title === '编辑'"
          placeholder="请选择类型"
          @change="aa"
        >
          <a-select-option value="0">
            初级
          </a-select-option>
          <a-select-option value="1">
            中级
          </a-select-option>
          <a-select-option value="2">
            最终
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="状态码">
        <a-input
          v-decorator="[
            'statusCode',
            {
              rules: [{ required: true, message: '请输入状态码!' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item label="状态名称">
        <a-input
          v-decorator="[
            'statuName',
            {
              rules: [{ required: true, message: '请输入状态名称!' }]
            }
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { addEventControl, editEventControl } from '@/services/users.js';
export default {
  props: {
    title: {
      type: String,
      default: '增加'
    },
    info: Array
  },
  data() {
    return {
      editId: '',
      t: '',
      visible: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'add_edit_eventstatus' })
    };
  },
  watch: {
    t(n) {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          pid: this.info[n].id
        });
      });
    }
  },
  methods: {
    aa(v) {
      this.t = v;
    },
    open(r) {
      this.visible = true;
      if (r) {
        this.$nextTick(() => {
          this.editId = r.id;
          this.form?.setFieldsValue({
            pid: r.pid,
            type: r.type,
            statusCode: r.statusCode,
            statuName: r.statuName
          });
        });
      } else {
        this.t = '';
        this.editId = '';
        this.form?.setFieldsValue({
          pid: '',
          type: '',
          statusCode: '',
          statuName: ''
        });
      }
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (this.title === '添加') {
            addEventControl(values).then(res => {
              if (res.code === 200) {
                this.$message.success('添加成功');
                this.$emit('updateList');
              } else {
                this.$message.warning(
                  '添加失败' + (res.message ? ',' + res.message : '')
                );
              }
            });
          } else {
            values.id = this.editId;
            editEventControl(values).then(res => {
              if (res.code === 200) {
                this.$message.success('编辑成功');
                this.$emit('updateList1', values);
              } else {
                this.$message.warning(
                  '编辑失败' + (res.message ? ',' + res.message : '')
                );
              }
            });
          }
        }
        this.visible = false;
      });
    },
    handleCancel() {
      this.visible = false;
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.ant-form-item-label {
  text-align: center;
}
</style>
